// ---------------1.获取学生数据，并渲染到表格------------
async function renderStudent () {
    const {data:res} = await axios.get('/students')
    console.log(res)
    let arr = res.data.map(item=>{
        return ` <tr>
                      <td>${item.name}</td>
                      <td>${item.age}</td>
                      <td>${item.gender === 0 ? '男' : '女'}</td>
                      <td>${item.group}</td>
                      <td>${item.hope_salary}</td>
                      <td>1${item.salary}</td>
                      <td>${item.province} ${item.city} ${item.area}</td>
                      <td>
                        <a href="javascript:;" class="text-success mr-3"><i data-id="${item.id}" class="bi bi-pen"></i></a>
                        <a href="javascript:;" class="text-danger"><i   data-id="${item.id}"  class="bi bi-trash"></i></a>
                      </td>
                    </tr>`
    })
    document.querySelector('tbody').innerHTML = arr.join('')
}
renderStudent ()

// 添加操作，需要提前准备，比如模态框的用法、省市县联动效果
// bootstrap模态框使用方法，两个步骤: 1. 实例化  2. 调用方法显示或隐藏
// let addModal = new bootstrap.Modal(模态框盒子)
let addModal = new bootstrap.Modal(document.querySelector('#modal'))

// addModal.show() // 让模态框显示
// addModal.hide() // 让模态框隐藏

// 点击 + 按钮的时候，让模态框显示
document.querySelector('#openModal').addEventListener('click', function () {
    //修改模态框的标题
    document.querySelector('#modal h5').innerHTML = '添加学员'
    document.querySelector('#form').reset()
  addModal.show()
})

//下面得函数，完成省市县得联动效果
async function initCity() {
    let province = document.querySelector('[name=province]')
    let city = document.querySelector('[name=city]')
    let area = document.querySelector('[name=area]') 
   //1.马上获取全部的省，渲染到第一个下拉框得位置
   const {data:res} = await axios.get('/api/province')
   let arr = res.data.map(item=>`<option value="${item}">${item} </option>`) 
   province.innerHTML = `<option value="">--省份--</option>` +arr.join('')

   //2.切换到省得时候，获取对应得市， 渲染到第二个下拉框得位置
   province.addEventListener('change', async function(){
    let pname = province.value
    //无论选择的是哪个省，一定要重置地区
    area.innerHTML = '<option value="">--地区--</option>'
    if( pname ==='') {
        return (city.innerHTML = `<option value="">--城市--</option>`)
    }
    const{data:res} = await axios.get('/api/city',{params:{pname}})
   let arr = res.data.map(item=>`<option value="${item}">${item} </option>`) 
   city.innerHTML = `<option value="">--城市--</option>` +arr.join('')
   })

   //3.切换到市得时候，获取对应得县， 渲染到第三个下拉框得位置
   city.addEventListener('change', async function(){
    let pname = province.value
    let cname = city.value
    if(cname ==='') {
        return (area.innerHTML = `<option value="">--地区--</option>`)
    }
    const{data:res} = await axios.get('/api/area',{params:{pname,cname}})
   let arr = res.data.map(item=>`<option value="${item}">${item} </option>`) 
   area.innerHTML = `<option value="">--地区--</option>` + arr.join('')
   })
}
initCity()


//点击弹层中的确认 按钮得时候
document.querySelector('#submit').addEventListener('click', async function(e){
       e.preventDefault()
       let data = val(document.querySelector('form'))
       //数据类型的值转换一下
       data.age= Number(data.age)
       data.gender = +data.gender  //+必须和后面的量连在一起
       data.group = +data.group
       data.hope_salary = +data.hope_salary
       data.salary = +data.salary 

       //判断，是添加还是修改操作
       let title = document.querySelector('#modal h5').innerHTML
       if(title ==='添加成员') {
       //ajax提交
       try {
        const {data:res} = await axios.post('/students',data)
        message.success(res.message)   //使用插件提示
        renderStudent()  //重新获取页面。重新渲染   
        addModal.hide()  //关闭弹层
       }catch(e) {
          message.error('添加失败')
       } 
    }else if (title==='修改成员'){
        try {
            let id = document.querySelector('#modal h5').dataset.id
            const {data:res} = await axios.put(`/students/${id}`,data)
        message.success(res.message)   //使用插件提示
        renderStudent()  //重新获取页面。重新渲染   
        addModal.hide()  //关闭弹层
       }catch(e) {
          message.error('修改失败')
        }
    }  
})

// ---------------------删除操作 | 编辑操作--------------------
document.querySelector('tbody').addEventListener('click',async function(e) {
    //判断，点击的是否是删除
if(e.target.classList.contains('bi-trash')) {
    let id =e.target.dataset.id
    try{
        const {data:res} =  await axios.delete(`/students/${id}`)
        message.success('删除成功')
        renderStudent()
    } catch(e) {
        message.error('删除失败')
    }
}
   //判断，点击的是否是编辑
if(e.target.classList.contains('bi-pen')) {
    let id =e.target.dataset.id
    // console.log('你点击的是编辑',id)

    //修改模态框的标题
    document.querySelector('#modal h5').innerHTML = '修改学员'
    document.querySelector('#modal h5').setAttribute('data-id',id)
    addModal.show()  //点击编辑的时候，出现弹框
    //要做数据回填==》要有数据==》根据id发送请求获取数据
    const {data:res}= await axios.get(`/students/${id}`)

    let p1 = axios.get('/api/city', {params:{pname:res.data.province}})
    let p2 = axios.get('/api/area',{params:{pname:res.data.province,cname:res.data.city}})
    const result= await Promise.all([p1,p2])
    let arr2 = result[0].data.data.map(item=>`<option value="${item}">${item} </option>`)
    document.querySelector('[name=city]').innerHTML=`<option value="">--城市-- </option>`+arr2.join('')

    let arr3 = result[1].data.data.map(item=>`<option value="${item}">${item} </option>`)
    document.querySelector('[name=area]').innerHTML=`<option value="">--地区-- </option>`+arr3.join('')
   
    val(document.querySelector('#form'),res.data)
}
})
